/* service/distribution/distribution.wxss */
page {
  background-color: #ffffff;
}

.apply_distribution {
  background-color: #77d38a;
  min-height: 100vh;
  padding: 14px;
  box-sizing: border-box;
  .title {
    font-size: 60rpx;
    text-align: center;
    color: #fff;
    padding: 40rpx;
  }
  &_container {
    background-color: #fff;
    padding: 52rpx 40rpx 78rpx;
    border-radius: 20rpx;
    .form {
      &_item {
        margin-top: 46rpx;
        &:first-child {
          margin-top: 0;
        }
        .label {
          font-size: 32rpx;
          font-weight: bold;
          color: #121212;
          text {
            color: #ff4800;
          }
        }
        .input {
          margin-top: 34rpx;
          display: flex;
          align-items: center;
          padding: 24rpx;
          border: 2rpx solid #e8e8e8;
          border-radius: 12rpx;
          image {
            width: 48rpx;
            height: 48rpx;
            flex-shrink: 0;
            margin-right: 18rpx;
          }
          input {
            width: 100%;
          }
        }
        .upload {
          margin-top: 34rpx;
        }
      }
    }
  }
}

.distribution {
  .bg {
    background-color: #77d38a;
    height: 440rpx;
  }

  .main {
    position: relative;
    z-index: 1;
    padding: 0 14rpx;

    .wallet {
      padding: 0 20rpx 0;
      margin-top: -400rpx;

      &_box {
        padding: 36rpx 46rpx 56rpx;
        border-radius: 20rpx;
        display: flex;
        position: relative;

        .wallet_bg {
          position: absolute;
          top: 0;
          left: 0;
          z-index: 1;
          width: 100%;
          height: 100%;
        }

        .wallet_item_box {
          width: 100%;
          display: flex;
          position: relative;
          z-index: 2;
        }

        .wallet_item {
          flex: 1;

          .name {
            font-size: 28rpx;
            color: #2b2b2b;
          }

          .number {
            font-size: 48rpx;
            font-weight: bold;
            color: #2b2b2b;
            margin-top: 8rpx;
          }
        }
      }
    }

    .withdraw {
      margin-top: -40rpx;
      background-color: #ffffff;
      padding: 44rpx 46rpx;
      box-shadow: 0rpx -4rpx 4rpx #efefef;

      &_box {
        display: flex;
        align-items: center;
        justify-content: space-between;

        .withdraw_text_money {
          .withdraw_text {
            font-size: 28rpx;
            color: #333333;
          }

          .money {
            margin-top: 8rpx;
            font-size: 48rpx;
            font-weight: bold;
            color: #ff4a4a;
          }
        }

        .withdraw_record {
          font-size: 28rpx;
          color: #9c9c9c;
          display: flex;
          align-items: center;

          text {
            margin-right: 10rpx;
          }
        }
      }

      .withdraw_card {
        display: flex;
        justify-content: space-between;
        margin-top: 40rpx;

        &_item {
          flex-shrink: 0;
          text-align: center;

          .text {
            font-size: 28rpx;
            color: #787878;
          }

          .money {
            font-size: 36rpx;
            font-weight: bold;
            color: #1f1f1f;
          }
        }
      }

      .tip {
        margin-top: 30rpx;
        font-size: 24rpx;
        color: #ff7640;
        display: flex;
        align-items: center;

        &::before {
          content: "";
          display: block;
          width: 4rpx;
          height: 18rpx;
          background-color: #ff8657;
          border-radius: 200rpx;
          margin-right: 8rpx;
        }
      }
    }
  }

  .share {
    margin-top: 20rpx;
    width: 100%;
    height: 160rpx;

    image {
      width: 100%;
      height: 100%;
    }
  }

  .theme_title {
    margin-top: 60rpx;
    display: flex;
    align-items: center;
    justify-content: center;

    image {
      width: 55rpx;
      height: 26rpx;
      flex-shrink: 0;
    }

    .title {
      font-size: 32rpx;
      font-weight: bold;
      color: #000000;
      margin: 0 24rpx;
    }
  }

  .team_list {
    margin-top: 28rpx;
    display: flex;
    flex-wrap: wrap;

    .team_item {
      margin: 30rpx 28rpx 0 0;
      background-size: 100% 100%;
      width: 220rpx;
      padding: 40rpx 0 0 0;
      box-sizing: border-box;
      border-radius: 16rpx;
      box-shadow: 0rpx 6rpx 16rpx #eaeaea;
      position: relative;

      &:nth-child(3n) {
        margin-right: 0;
      }

      .team_bg {
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
        z-index: 1;
      }

      .team_item_box {
        position: relative;
        z-index: 2;
        width: 100%;
      }

      .avatar {
        width: 90rpx;
        height: 90rpx;
        display: block;
        margin: auto;
        border-radius: 50%;
      }

      .nickname {
        font-size: 28rpx;
        color: #121212;
        text-align: center;
        margin-top: 20rpx;
      }

      .code {
        width: 100%;
        height: 64rpx;
        background-size: 100% 100%;
        margin-top: 26rpx;
        position: relative;

        &_bg {
          position: absolute;
          top: 0;
          left: 0;
          z-index: 1;
          width: 100%;
          height: 100%;
        }

        text {
          display: block;
          padding-top: 15rpx;
          text-align: center;
          font-size: 28rpx;
          color: #ffffff;
          font-weight: bold;
          position: relative;
          z-index: 2;
        }
      }
    }
  }

  .share_popup {
    padding: 20rpx;

    image {
      width: 600rpx;
    }

    .btn_group {
      display: flex;
      justify-content: space-around;
      margin-top: 20rpx;

      .btn {
        background: #ff8657;
        color: #fff;
        border-radius: 50rpx;
        padding: 10rpx 50rpx;
        font-size: 28rpx;
        position: relative;

        button {
          position: absolute;
          width: 100%;
          height: 100%;
          left: 0;
          top: 0;
          opacity: 0;
        }
      }
    }
  }
}

.button {
  margin-top: 48rpx;
  width: 640rpx;
  height: 96rpx;
  border-radius: 200rpx;
  background: linear-gradient(90deg, #ff7262 0%, #ff9958 100%);
  box-shadow: 0rpx 8rpx 4rpx #ff4a4a;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 32rpx;
  font-weight: bold;
  color: #ffffff;
}
